<style scoped>
.layout {
	border: 1px solid #d7dde4;
	background: #f5f7f9;
    min-width: 800px;
    min-height: 600px;
}

.layout-logo {
	width: 100px;
	height: 30px;
	background: #5b6270;
	border-radius: 3px;
	float: left;
	position: relative;
	top: 15px;
	left: 20px;
}

.layout-nav {
	width: 420px;
	margin: 0 auto;
}

.layout-assistant {
	width: 300px;
	margin: 0 auto;
	height: inherit;
}

.layout-breadcrumb {
	padding: 10px 15px 0;
}

.layout-content {
	min-height: 200px;
	margin: 15px;
	overflow: hidden;
	background: #fff;
	border-radius: 4px;
}

.layout-content-main {
	padding: 10px;
}

.layout-copy {
	text-align: center;
	padding: 10px 0 20px;
	color: #9ea7b4;
}
</style>
<template>
<div class="layout">
	<Menu mode="horizontal" theme="dark" active-name="todo" @on-select="changeMenu">
		<div class="layout-logo"></div>
		<div class="layout-nav">
			<MenuItem name="todo">
			<Icon type="ios-paper"></Icon>
			任务清单
			</MenuItem>
			<MenuItem name="file">
			<Icon type="filing"></Icon>
			任务归档
			</MenuItem>
			<MenuItem name="about">
			<Icon type="person"></Icon>
			关于作者
			</MenuItem>
		</div>
	</Menu>
	<div id="div-content" class="layout-content">
		<router-view></router-view>
	</div>
	<div class="layout-copy">
		2016-2017 &copy; <a href="http://blog.noasis.cn" target="_blank">zZ爱吃菜</a>
	</div>
</div>
</template>
<script>
export default {
	data() {
		return {
			currentPage: 'todo'
		}
	},
	methods: {
		// 初始化 布局
		initLayout() {
			var height = window.innerHeight
			var content = document.getElementById('div-content')
			content.style.height = (height - 150) + 'px'
		},
		changeMenu(menuName) {
			var type = menuName || 'todo'
			this.currentPage = type
			switch (type) {
				case 'todo':
					this.$router.push({
						name: 'Todo'
					})
					break
				case 'file':
					this.$router.push({
						name: 'File'
					})
					break
				case 'about':
					this.$router.push({
						name: 'About'
					})
					break
			}
		}
	},
	mounted() {
		this.initLayout()
		this.changeMenu(this.currentPage)
	}
}
</script>
